<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!--响应式布局-->
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<!--标题logo-->
		<link rel="shortcut icon" href="img/logo.png" />
		<title>IT极客空间博客</title>

		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<!--菜单标签前的小图标用到-->
		<link rel="stylesheet" href="css/font-awesome.min.css" />

		<!--折叠标题菜单用到-->
		<link href="css/dashboard.css" rel="stylesheet" />
		<script src="js/ie-emulation-modes-warning.js" type="text/javascript"></script>
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
      		<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
      		<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
		<!--用于切换博客内容，通过层-->
		<script type="text/javascript">
			function nTabs(thisObj, Num) {
				if(thisObj.className == "active") return;
				var tabObj = thisObj.parentNode.id;
				var tabList = document.getElementById(tabObj).getElementsByTagName("li");
				for(i = 0; i < tabList.length; i++) {
					if(i == Num) {
						thisObj.className = "active";
						document.getElementById(tabObj + "_Content" + i).style.display = "block";
					} else {
						tabList[i].className = "normal";
						document.getElementById(tabObj + "_Content" + i).style.display = "none";
					}
				}
			}
		</script>
		<style type="text/css">
			.none {display:none;}
		</style>
		<script src="//cdn.bootcss.com/markdown.js/0.6.0-beta1/markdown.min.js"></script>
	</head>

	<body>

		<!--博客头部-->
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<!--<nav class="navbar  navbar-fixed-top nav-tabs" role="navigation">-->
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
			            <span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
					<a class="navbar-brand" href="#"><b>个人博客</b></a>
				</div>
				<!--<div class="navbar-collapse collapse">-->
				<div id="navbar" class="navbar-collapse collapse">

					<ul class="nav navbar-nav">
						<li>
							<a href="index.html"><i class="fa fa-home"></i>主页</a>
						</li>

						<li>
							<a href="news.html"><i class="fa fa-eye"></i>新发现</a>
						</li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#">
								<i class="fa"></i>实验室 <span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#"><i class="fa fa-book"></i>blog精神</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="http://itgeek.space/itgeek_website.cc/">我的其它网站</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="http://itgeek.space/itgeek_website.cc/404.html">关于我</a>
						</li>
					</ul>

					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="http://blog.csdn.net/sinat_34820292" target="_blank">CSND博客</a>
						</li>
						<li>
							<a href="http://q.sina.com.cn" target="_blank">新浪博客</a>
						</li>
						<li>
							<a href="https://coding.net/u/tim5wang/" target="_blank"><i class="fa fa-recycle"></i>&nbsp;coding page</a>
						</li>

						<li>
							<form class="navbar-form navbar-right">
								<span>
									<input type="text" class="form-control" placeholder="搜索">
								</span>
								<div class="btn-group">
									<button class="btn" data-toggle="dropdown">
						 				<i class="fa"></i>
						 				<span class="caret"></span>&nbsp;搜索
						 			</button>
									<ul class="dropdown-menu dropdown">
										<li>
											<a class="search-query" href="http://itgeek.space" target="_blank">本站点</a>
										</li>
										<li>
											<a class="search-query" href="https://baidu.com" target="_blank">百度</a>
										</li>
										<li>
											<a class="search-query" href="https://www.google.com.hk/?gws_rd=ssl" target="_blank">googel</a>
										</li>
										<li>
											<a class="search-query" href="https://blog.csdn.net" target="_blank">CSDN</a>
										</li>
										<li>
											<a class="search-query" href="https://www.zhihu.com" target="_blank">知乎</a>
										</li>
									</ul>
								</div>
							</form>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		
		<div class="container-fluid">
<!--+===============================================================================+-->
<!--+===============================================================================+-->
<!--+===============================================================================+-->
<!--+===============================================================================+-->
			<!--博客左边栏-->
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
					<ul class="nav nav-sidebar" id="myTab0">

						<li class="active" onclick="nTabs(this,0);">
							<a href="#">如何用github搭建静态网站</a>
						</li>
						<li class="normal" onclick="nTabs(this,1);">
							<a href="#">第二条博文</a>
						</li>
						<li class="normal" onclick="nTabs(this,2);">
							<a href="#">第三条博文</a>
						</li>
						<li class="normal" onclick="nTabs(this,3);">
							<a href="#">第四条博文</a>
						</li>
					</ul>
				</div>
<!--+===============================================================================+-->
<!--+===============================================================================+-->
<!--+===============================================================================+-->
<!--+===============================================================================+-->
				<!--右边内容区,通过切换层来-->
				<div class="TabContent">
<!--=========================博客一 ===================================================-->
					
					<div id="myTab0_Content0">
						<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
							<h1 class="page-header">准备材料</h1>

							<div class="row placeholders">
								<div class="col-xs-6 col-sm-3 placeholder">

									<object width="180" height="180" data="img/hamster.swf" align="center" />
									<p align="center"><img src="img/ico200x.png" /></p>
									<p style="color: red;">无flash插件或未启用(flash下有一只聪明的小鼠)</p>
									</object>
									<h4>耐心</h4>

									<span class="text-muted">耐心是学习新事物所必要的</span>
								</div>
								<div class="col-xs-6 col-sm-3 placeholder">
									<img src="img/404200x.jpg" />
									<h4>github免费账号</h4>
									<span class="text-muted">git.oschina,coding.net的也行</span>
								</div>
								<div class="col-xs-6 col-sm-3 placeholder">
									<img src="img/git180x.png" />
									<h4>git软件</h4>
									<span class="text-muted">基本的远程仓库管理方法</span>
								</div>
								<div class="col-xs-6 col-sm-3 placeholder">
									<img src="img/Domain.jpg" width="170" height="170" />
									<h4>注册个域名</h4>
									<span class="text-muted">不注册也可以，注册学会域名管理</span>
								</div>

							</div>
						</div>

						<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
							<h1 class="page-header">第一步</h1>
							<p>
								学习Git的常用操作，如： git add --all;git commit -m "version1";git push origin master等　　 </p>
							<p align="center">
								<img src="img/git_push.png" />
							</p>
							
							
							<h1 class="page-header">第二步</h1>
							<p></p>
							<h1 class="page-header">第三步</h1>
							<p></p>
							<h1 class="page-header">第四步</h1>
							<p></p>
						</div>
					</div>
				</div>
<!--=====================================博客二 =====================================-->
			<!--在这里写下一条博客，或者分布到别的文档，还待优化-->
					<div id="myTab0_Content1" style="display: none;">
						<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
							 <iframe  name="iframe1" src="blog/blog16112101用markdown语法写博客.html" 
							 	width="100%" height="100%" scrolling="no" frameborder="0"
							 	onload="this.height=iframe1.document.body.scrollHeight" > </iframe>
						</div>
					</div>
					
<!--======================================博客三====================================-->
					<div id="myTab0_Content2" style="display: none;" >
						<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" >
							<h1 class="page-header" >博客三</h1>	
							<h2>用markdown语法书写博客内容，网页自动调用markdown.js编译</h>
							<div style="display: none;">
							<textarea  id="text-input"  rows="10000" cols="100">#内容在这里书写（见代码） ** [百度](http://www.baidu.com)**</textarea>
							
							</div>
							
							<div id="preview" onload="this.editor.update()"> 
							<!--编译出的页面将在网页这里显示-->
							<!--=======================================================-->
							<!--=======================================================-->
							<!--=======================================================-->
							<!--=======================================================-->
							<!--=======================================================-->
							<!--=======================================================-->
							<!--=======================================================-->
							<!--=======================================================-->
							</div>
						</div>
						<!--引入MarkDown编辑器，方便博客写作排版-->
						<!--参考：   http://www.tuicool.com/articles/3uIjei6-->
						<script src="js/markdown.js"></script>
					    <script>
					      function Editor(input, preview) {
					        this.update = function () {
					          preview.innerHTML = markdown.toHTML(input.value);
					        };
					        input.editor = this;
					        this.update();
					      }
					      var $ = function (id) { return document.getElementById(id); };
					      new Editor($("text-input"), $("preview"));
					    </script>
					    <script>
					    	function myEditer(input,privew){
					    		this.load = function(){
					    			var inputtex = document.getElementById("p-input").innerHTML.alert;
					    			
					    		}
					    	}
					    </script>
					</div>
					
					<div id="myTab0_Content2" style="display: none;" >
						
					</div>
					
				<!--底部版权-->	
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					 <h1 class="page-header"></h1>
					<div class="footer-bottom-area">
						<div class="container">
							<div class="row">
								<div class="col-md-8">
									<div class="copyright">
										<p>Copyright &copy;itgeek.space</p>
									</div>
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<script src="js/jquery.min.js"></script>
			<script src="js/bootstrap.min.js"></script>
			<script src="js/docs.min.js"></script>
			<script src="js/ie10-viewport-bug-workaround.js"></script>

	</body>

</html>